<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <link rel="StyleSheet" type="text/css" href="/tpa/admin.css" />
   <link rel="StyleSheet" type="text/css" href="/tpa/jquery-ui.css" />
   <script type="text/javascript" src="/lib/js/jquery.js"></script>
   <script type="text/javascript" src="/lib/js/jquery.ui.js"></script>
   <script type="text/javascript" src="/lib/js/meccano.js"></script>
   <style type="text/css">
      table.templates {
         width: 600px;
         margin-top: 50px;
      }
      .templates td {
         background-color: #2C2;
         padding: 40px 0;
         text-align: center;
      }
      .templates td.disabled {
         background-color: #DDD;
      }
   </style>
</head>
<body>
   <div align="center" id="templatesSets">
      <form method="post" action="/admin/templates.php" id="templatesForm">
         <table cellpadding="0" cellspacing="4" class="templates">
            <tr>
               <td colspan="3" height="100">
                  <label>Meta:</label>
                  <select name="f[meta]" id="tpl_meta">
                     <option value="default">Default</option>
                     <option value="disabled">Disabled</option>
                  </select>
               </td>
            </tr>
            <tr>
               <td colspan="3" height="100">
                  <label>Header:</label>
                  <select name="f[header]" id="tpl_header">
                     <option value="default">Default</option>
                     <option value="disabled">Disabled</option>
                     <option value="base">Base</option>
                     <option value="article">Article</option>
                     <option value="articles">Articles</option>
                  </select>
               </td>
            </tr>
            <tr>
               <td height="100">
                  <label>Left:</label>
                  <select name="f[left]" id="tpl_left">
                     <option value="default">Default</option>
                     <option value="disabled">Disabled</option>
                     <option value="base">Base</option>
                     <option value="article">Article</option>
                     <option value="articles">Articles</option>
                  </select>
               </td>
               <td height="100">
                  <label>Center:</label>
                  <select name="f[center]" id="tpl_center">
                     <option value="default">Default</option>
                     <option value="disabled">Disabled</option>
                     <option value="base">Base</option>
                     <option value="article">Article</option>
                     <option value="articles">Articles</option>
                  </select>
               </td>
               <td height="100">
                  <label>Right:</label>
                  <select name="f[right]" id="tpl_center">
                     <option value="default">Default</option>
                     <option value="disabled">Disabled</option>
                     <option value="base">Base</option>
                     <option value="article">Article</option>
                     <option value="articles">Articles</option>
                  </select>
               </td>
            </tr>
            <tr>
               <td colspan="3" height="100">
                  <label>Footer:</label>
                  <select name="f[footer]" id="tpl_footer">
                     <option value="default">Default</option>
                     <option value="disabled">Disabled</option>
                  </select>
               </td>
            </tr>
         </table>
      </form>
   </div>
   
   <script type="text/javascript">
      var templatesPreset = {%$tpls%};
      $(document).ready(function(){
         
         for(var x in templatesPreset)
         {
            $("#tpl_"+x).val(templatesPreset[x]);
            if(templatesPreset[x] == 'disabled')
            {
               $("#tpl_"+x).parent().addClass("disabled");
            }
         }
         
         $("#templatesSets select").change(function(){
            
            if($(this).val() == 'disabled')
            {
               $(this).parent().addClass("disabled");
            } else
            {
               $(this).parent().removeClass("disabled");
            }
            
            var status = false;
            for(var x in templatesPreset)
            {
               if(templatesPreset[x] != $("#tpl_"+x).val())
               {
                  status = true;
                  break;
               }
            }
            
            if(status)
            {
               meccano.dialog('Do you want to save New Values?', {
                  "Ok": function(){
                     $("#templatesForm").submit();
                  },
                  "Cancel": function(){
                     meccano.hideNotification();
                  }
               })
            } else
            {
               meccano.hideNotification();
            }
         });
      });
   </script>
</body>
</html>